<template>
  <div class="app-content app-content-mobile">
    <div class="app-title-group">
      <van-nav-bar :title="title" :left-text="title == '采集列表'?'':'返回'" :left-arrow="title == '采集列表'?false:true"  @click-left="onClickLeft"
  @click-right="showPopup=true">
        <template #right>
          <van-icon name="wap-nav" size="28" style="color:#333;" />
        </template>
      </van-nav-bar>
    </div>
     <div class="app-router-mobile">
       <keep-alive include="test">
        <router-view></router-view>
      </keep-alive> 
     </div>
     <van-popup v-model="showPopup" position="right" :style="{ width: '50%','height':'100%'}">
       <nav-mobild :menuMobileBack="menuMobileBack"></nav-mobild>
     </van-popup>
  </div>
</template>
<script>
  import NavMobild from "@/common/NavMobild"; 
  import bus from '@/common/bus';
  import {Icon,Popup,Toast,NavBar} from 'vant';
 export default {
  name:'MobileHome',
   components:{NavMobild,[Icon.name]: Icon,[Popup.name]: Popup,[NavBar.name]: NavBar},
   data(){
     return {
       logos:'',
       scrollType:false,
       isMobile:this.$isMobile,
       showPopup:false,
       title:'采集列表',
       leftArrow:false,
       is_show_nav:true,
       is_show_banner:true,
       QR_code:'',
       isOpen:false,
       show:false,
       footerInfo:{},
       channel_detail:null,
       homeShow:false,
       homeTime:5,
       alertTitle:'',
       alertArticle:'',
       navList: [
        { content: "/mobile/admin/home", title: "采集列表" },
        // { content: "/mobile/admin/statistics", title: "统计中心" },
        { content: "/mobile/admin/mine", title: "个人中心" }
      ],
     }
   },
  watch:{
    $route(to,from){
      this.title=to.meta.title;
      this.setScrollTop();
    }
  },
  created(){
    let pathRoute=this.$route.path;
    this.navList.forEach(item=>{
      if(item.content === pathRoute)this.title=item.title;
    })
     this.isMobile=this.isMobild();
     bus.$on('openModelMethod', msg => {
      this.show = msg;
    });
   },
   methods:{
    onClickLeft(){
      this.$router.goBack()
    },
     setScrollTop(){
        window.scrollTo(0,0);
     },
     isMobild(){
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
          return true
        } else {
          return false;
        }
      },
     signupCallback(){
       this.show=false
     },
     onClickLeft(){
       this.$router.back()
    },
    bannerBack(item){
      this.is_show_logo=item.is_show_logo;
      this.is_show_banner=item.is_show_banner;
    },
    menuMobileBack(){
      this.showPopup=false;
    },
    showCg(){
      this.$location(1,'appointment_visit')
    },
    showModel(){
      this.bmModel=true;
      this.$forceUpdate();
    },
    goHome(){
      this.$router.push({path:'/'})
    },
    Text2Html(str) {
      if (str == null) {
          return "";
      }else if (str.length == 0) {
          return "";
      }
      str = str.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
      str = str.replace(/\n/g, '<br/>'); //IE7-8
      str = str.replace(/\s/g, '&nbsp;'); //空格处理
      return str;
    }
   }
 }
</script>

<style>
body {
  font-size: 16px;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}
.home-alert-model{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-alert-content{
  background-color:#fff;
  border-radius: 6px;
  padding:10px;
}
.home-alert-title{
  text-align: center;
  padding-bottom:10px;
  font-size: 16px;
  text-align: center;
  color:#333;
  font-weight: bold;
}
.mobile-alert-content{
  width: 90%;
}
.web-alert-content{
  width:60%;
}
.home-alert-text{
  font-size: 15px;
  color:#333;
  line-height: 26px;
}
.home-alert-close{
  font-size: 14px;
  padding:0 10px 10px;
  text-align: right;
  color: red;
}
.scroll-top-group{
  position: fixed;
  bottom:40px;
  right:20px;
  z-index: 200;
  width: 40px;
  height: 40px;
  background: #eee;
  color:#d45300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 32px;
  box-shadow: 1px 1px 8px -2px #000;
}
.app-content{
  width: 100%;
  height: 100%;
}
.app-router-web{
  /* width: 1200px;
  margin:0 auto; */
  min-height: 800px;
}
.app-router-mobile{
  width: 100%;
  min-height: 600px;
}
.app-content-mobile{
  padding-top:46px;
  position: relative;
}
.app-title-group{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  z-index: 100;
  /* display: flex; */
  /* padding:6px 20px; */
  /* justify-content: space-between; */
  background: #fafafa;
  align-items: center;
  height: 46px;
  z-index: 999;
  border-bottom:1px solid #eee;
  box-shadow: 0 15px 10px -15px rgba(0,0,0,.2);
}
.app-title-group img{
  height: 24px;
  width: auto;
}
.flex-left-web{
  right:20px;
   top:50%;
   transform: translateY(-50%);
}
.flex-left-mobile{
  right:-160px;
   top:20%;
}
.flex-left-mobile-active{
  right:0;
   top:20%;
}
.flex-left-group{
  position: fixed;
  transition: right .6s;
  z-index: 999;
}
.mobile-open-button{
  top:20%;
  position: fixed;
  right:0;
  width: 36px;
  padding:12px;
  font-size:12px;
  color:#fff;
  border-radius: 6px 0 0 6px;
  background: #000;
  z-index: 999;
}
.flex-left-group .wwexin{
   padding:10px;
   background: #000;
}
.flex-left-group .wwexin-web img{
   width: 140px;
   height: 140px;
}
.flex-left-group .wwexin-mobile img{
   width: 100px;
   height: 100px;
}
.flex-left-group .wwexin-web .title{
  font-size:14px;
}
.flex-left-group .wwexin-mobile .title{
   font-size:11px;
}
.flex-left-group .wwexin .title{
  padding:6px 0;
  text-align: center;
  
  color:#fff;
}
.flex-left-group .button-group{
  margin-top:8px;
  color:#fff;
  text-align: center;
  background-size:100% 100%;
  padding:8px 0;
  position: relative;
  background: #000;
  font-size:13px;
}
.flex-left-group .button-group:after{
  content:'';
  border-style: solid;
  border-width: 15px;
  border-color: transparent  transparent  transparent #d45300;
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%);
  z-index: 99;
}
.flex-left-group .button-group:hover{
  cursor: pointer;
  color:#d45300;
}
</style>


